// render 渲染一个虚拟dom
// h 创建一个vnode节点
import MessageConstructor from './Mwssage.vue'
import type { CreateMessageProps, MessageContext } from './types'
import { render, h, reactive } from 'vue'
let seed = 1
//存储组件实例
const instances: MessageContext[] = reactive([])
export const createMessage = (props: CreateMessageProps) => {
  // 创建dom元素
  const container = document.createElement('div')

  // 删除节点
  const destroy = () => {
    const idx = instances.findIndex((instance) => instance.id === id)
    if (idx === -1) return
    instances.splice(idx, 1)
    render(null, container)
  }
  // 提供关闭方法
  const manuallyDestroy = () => {
    const instance = instances.find((instance) => instance.id === id)
    if (instance) {
      instance.vm.exposed!.visible.value = false
    }
  }

  // 组件id
  const id = `message_${seed++}`

  //合并参数
  const newProps = {
    id,
    ...props,
    onDestroy: destroy
  }
  // 创建虚拟dom（message组件，传入的参数）
  const vnode = h(MessageConstructor, newProps)

  // 渲染虚拟节点
  render(vnode, container)
  // 将节点添加到页面上
  document.body.appendChild(container.firstElementChild!)

  //获取组件实例
  const vm = vnode.component!
  // 组件实例对象（渲染完成之后才可以拿到组件实例）
  const instance = {
    id,
    vnode,
    props: newProps,
    vm,
    destroy: manuallyDestroy
  }
  // 添加
  instances.push(instance)
  // 返回组件实例
  return instance
}
// 获取最后一个组件的实例
export const getLastInstance = () => {
  return instances[instances.length - 1]
}

// 伪方法: 获取上一个实例的最下面的坐标数字
export const getLastBottomOffset = (id: string) => {
  const idx = instances.findIndex((instance) => instance.id === id)
  if (idx <= 0) {
    return 0
  } else {
    // 获取上一个组件实例
    const prev = instances[idx - 1]
    return prev.vm.exposed!.bottomOffset.value
  }
}
